<template>
	<view class="site-info">
		<view class="one" @click="clickSite">
			<view class="left">
				<image v-if="isGet" src="../../static/images/deliveryorder/get.png" mode="" style="margin-right: 20rpx;width: 50rpx; height: 50rpx;"></image>
				<image v-else src="../../static/images/deliveryorder/post.png" mode="" style="margin-right: 20rpx;width: 50rpx; height: 50rpx;"></image>
				<text>{{ isGet ? '取物站点' : '送物站点' }}</text>
			</view>
			<view class="right">
				<text style="margin-right: 14rpx;">
					{{
						(obj.task_start_floor || obj.task_end_floor || '') + '-' + (obj.task_start_station || obj.task_end_station || '') === '-'
							? '请选择'
							: (obj.task_start_floor || obj.task_end_floor || '') + '-' + (obj.task_start_station || obj.task_end_station || '')
					}}
				</text>
				<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
			</view>
		</view>
		<view class="two">
			<view class="left">
				站点联系人手机号
			</view>
			<view class="right">
				{{ obj.task_start_phone || obj.task_end_phone || '' }}
			</view>
		</view>
		<xbd-select-two ref="selRef" title="请选择停留时间" :carId.sync="time"  :visible.sync="visible" :infoList="typeArr" >
			<template>
				<view class="one" @click="visible = true" :style="isGet ? 'border-bottom: 0; padding-bottom: 5px;' : ''">
					<view class="left">
						站点停留时间
					</view>
					<view class="right">
						<text style="margin-right: 14rpx;">{{ time }}</text>
						<uni-icons type="arrowright" size="14" color="#999"></uni-icons>
					</view>
				</view>
			</template>
		</xbd-select-two>
		<view class="four" v-if="!isGet">
			<view class="top">
				<view class="left">
					无验证取件
				</view>
				<view class="right">
					<switch :checked="obj.task_need_pick_verify" color="#59B500" @change="switchChange" />
				</view>
			</view>
			<view class="bottom">
				开启后，取件时无需输入验证码即可开箱取物
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SiteInfo',
		props: {
			_id:String,
			isGet: {
				type: Boolean
			},
			obj: Object
		},
		data() {
			return {
				visible: false,
				time: '10min',
				typeArr: [
					{
						value: '0',
						label: '4min',
						state:''
					},
					{
						value: '1',
						label: '5min',
						state:''
					},
					{
						value: '2',
						label: '6min',
						state:''
					},
					{
						value: '3',
						label: '7min',
						state:''
					},
					{
						value: '4',
						label: '8min',
						state:''
					},
					{
						value: '5',
						label: '9min',
						state:''
					},
					{
						value: '6',
						label: '10min',
						state:''
					},
					{
						value: '7',
						label: '11min',
						state:''
					},
					{
						value: '8',
						label: '12min',
						state:''
					},
					{
						value: '9',
						label: '13min',
						state:''
					},
					{
						value: '10',
						label: '14min',
						state:''
					},
					{
						value: '11',
						label: '15min',
						state:''
					},
					{
						value: '12',
						label: '16min',
						state:''
					},
					{
						value: '13',
						label: '17min',
						state:''
					},
					{
						value: '14',
						label: '18min',
						state:''
					},
					{
						value: '15',
						label: '19min',
						state:''
					},
					{
						value: '16',
						label: '20min',
						state:''
					}
				]
			};
		},
		watch: {
			time(val) {
				this.$emit('changeTime', parseInt(val), this.isGet);
			}
		},
		methods: {
			switchChange(e) {
				this.$emit('switchChange', e.target.value);
			},
			clickSite() {
				uni.navigateTo({
					url: `/pages/deliveryorder/mysite?isGet=${this.isGet}&id=${this._id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		created() {
			this.time = this.isGet ? this.obj.task_start_duration + 'min' : this.obj.task_end_duration + 'min';
		},
		mounted() {
			this.$refs.selRef.value = [6]
			this.$refs.selRef.oldValue = [6]
		}
	}
</script>

<style lang="scss" scoped>
	.site-info {
		padding: 15px 50rpx;
		margin-bottom: 10px;
		
		background-color: #FFFFFF;
		.one {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			padding-bottom: 16px;
			border-bottom: 1px solid #E8E2E2;
			
			font-size: 28rpx;
			
			color: #BBC0C9;
			.left {
				display: flex;
				align-items: center;
				color: $uni-text-color;
			}
		}
		.two {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			padding: 15px 0;
			margin-bottom: 15px;
			border-bottom: 1px solid #E8E2E2;
			
			font-size: 28rpx;
			color: #BBC0C9;
		}
		.four {
			// padding: 15px 10rpx 0 0;
			
			font-size: 24rpx;
			color: #BBC0C9;
			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				font-size: 28rpx;
				
				color: $uni-text-color;
				
				.right {
					transform: scale(0.5);
				}
			}
		}
	}
</style>
